import React, { createContext, useContext } from "react";
// todo useContext只能代替Consumer的作用
// todo 里面需要传入context对象, 返回value对象

const context1 = createContext();
const context2 = createContext();

const Child2 = () => {
  const { name } = useContext(context1);
  const { nick } = useContext(context2);
  return (
    <div>
      child2组件 - {name} - {nick}
      {/* <context1.Consumer>
        {(value) => (
          <span>
            {value.name} -{" "}
            <context2.Consumer>
              {(val) => <span>{val.nick}</span>}
            </context2.Consumer>
          </span>
        )}
      </context1.Consumer> */}
    </div>
  );
};

const Child = () => {
  return (
    <context2.Provider value={{ nick: "juner" }}>
      <div>child组件</div>
      <Child2 />
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider value={{ name: "zhangmou" }}>
      <h2>useContext</h2>
      <Child />
    </context1.Provider>
  );
};

export default App;
